<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="common/admin-header"></head>
<body onload="showMessage()">
<section class="material-half-bg">
    <div class="cover"></div>
</section>
<section class="login-content">
    <div class="logo">
        <h1>Td-blog</h1>
    </div>
    <div class="login-box">
        <form id="login" class="login-form" method="post" action="/user_login">
            <h3><i class="fa fa-lg fa-fw fa-user"></i>登陆</h3>
            <hr/>
            <div class="form-group">
                <label class="control-label">账号</label>
                <input name="email" class="form-control" type="text" placeholder="Email" autofocus>
            </div>
            <div class="form-group">
                <label class="control-label">密码</label>
                <input name="pwd" class="form-control" type="password" placeholder="Password">
            </div>


            <div class="form-group">
                <div class="utility">
                    <div class="animated-checkbox">
                        <label>
                            <input type="checkbox"><span class="label-text">记住密码</span>

                        </label>

                    </div>
                </div>
            </div>



            <div class="form-group btn-container">
                <button class="btn btn-primary btn-block" type="submit">
                    <i class="fa fa-sign-in fa-lg fa-fw"></i>
                    登录
                </button>
            </div>

            <div class="form-group">
                <div class="utility">
                    <p class="semibold-text mb-2"><a href="/regist">没有账号，去注册</a></p>
                    <p class="semibold-text mb-2"><a href="#" data-toggle="flip">忘记密码 ?</a></p>
                </div>
            </div>
        </form>
        <form class="forget-form" action="index.html">
            <h3 class="login-head"><i class="fa fa-lg fa-fw fa-lock"></i>忘记密码 ?</h3>
            <div class="form-group">
                <label class="control-label">账号</label>
                <input class="form-control" type="text" placeholder="Email">
            </div>
            <div class="form-group btn-container">
                <button class="btn btn-primary btn-block"><i class="fa fa-unlock fa-lg fa-fw"></i>重置</button>
            </div>
            <div class="form-group mt-3">
                <p class="semibold-text mb-0"><a href="#" data-toggle="flip"><i class="fa fa-angle-left fa-fw"></i>
                    回到登录界面</a></p>
            </div>
        </form>


    </div>
</section>
<!-- Essential javascripts for application to work-->
<script src="/valires/js/jquery-3.2.1.min.js"></script>
<script src="/valires/js/popper.min.js"></script>
<script src="/valires/js/bootstrap.min.js"></script>
<script src="/valires/js/main.js"></script>
<!-- The javascript plugin to display page loading on top-->
<script src="/valires/js/plugins/pace.min.js"></script>

<script type="text/javascript" src="/valires/js/plugins/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="/valires/js/plugins/sweetalert.min.js"></script>
<script type="text/javascript">
    // Login Page Flipbox control
    $('.login-content [data-toggle="flip"]').click(function () {
        $('.login-box').toggleClass('flipped');
        return false;
    });
</script>

<script th:inline="javascript">
    function showMessage() {
        var msg = [[${msg}]];
        for (var k in msg) {
            notifyMsg(msg[k]);
            //遍历对象，k即为key，obj[k]为当前k对应的值
            // if (k == '10001') {
            //     console.log(k);
            //     console.log(msg[k]);
            //     notifyMsg(msg[k])
            // }
        }
    }

    function notifyMsg(msg) {
        var notify = $.notify({
            // options
            icon: 'glyphicon glyphicon-warning-sign',
            title: 'info',
            message: msg,
            target: '_blank'
        }, {
            // settings
            element: 'body',
            position: null,
            type: "warning",
            allow_dismiss: true,
            newest_on_top: true,
            showProgressbar: false,
            placement: {
                from: "top",
                align: "center"
            },
            offset: 20,
            spacing: 10,
            z_index: 1031,
            delay: 3000,
            timer: 1000,
            url_target: '_blank'
        });

        return notify;
    }
</script>

<!--使用ajax提交表单，需要设置input type 为button-->
<!--<script type="text/javascript">-->
<!--function userlogin(){-->
<!--var form = new FormData(document.getElementById("login"));-->
<!--$.ajax({-->
<!--url:"/user_login",-->
<!--type:"post",-->
<!--data:form,-->
<!--processData:false,-->
<!--contentType:false,-->
<!--success:function(data){-->
<!--location.href="/";-->
<!--},-->
<!--error:function(e){-->
<!--alert("错误！！");-->
<!--}-->
<!--});-->
<!--}-->
<!--</script>-->

</body>
</html>